<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../res/layui/css/layui.css">

</head>
<body>
<div class="layui-fluid">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>音乐上传</legend>
        <div class="layui-field-box">
            <div class="layui-col-md6">
                <form class="layui-form layui-form-pane" lay-filter="formMusic" id="formMusic">
                    <!--表单控件项：文件上传（歌曲文件）-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">歌曲文件:</label>
                        <button class="layui-btn layui-btn-normal" type="button" id="btnMusic">
                            <i class="layui-icon layui-icon-upload"></i>
                            选择文件
                        </button>
                        <!--播放器隐藏控件：获取总播放时长用-->
                        <audio src="" id="player" style="display: none"></audio>
                    </div>

                    <!--歌曲文件的存储地址-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">播放地址:</label>
                        <div class="layui-input-block">
                            <!--用于存储上传文件之后云端返回的文件地址 -->
                            <input class="layui-input" readonly type="text" name="url" id="url" placeholder="选择文件后自动填充"/>
                        </div>
                    </div>

                    <!--歌曲的播放时长-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">时长(秒):</label>
                        <div class="layui-input-block">
                            <!--表单提交时提交歌曲总播放时长-->
                            <input  class="layui-input" readonly  type="text" name="duration" id="duration" placeholder="选择文件后自动填充"/>
                        </div>
                    </div>

                    <!--表单控件项：歌曲名-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">歌曲名:</label>
                        <div class="layui-input-block">
                            <input class="layui-input" type="text" name="name" id="musicname" lay-verify="required"
                                   lay-verType="tips" lay-reqText="请输入歌曲名称">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">专辑:</label>
                        <div class="layui-input-block">
                            <select name="aid" id="aid">
                                <option value="">请选择专辑</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">歌手:</label>
                        <div class="layui-input-block">
                            <input class="layui-input" type="text" name="singer" id="singer" lay-verify="required"
                                   lay-verType="tips" lay-reqText="请输入歌手">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">标签:</label>
                        <div class="layui-input-block">
                            <input class="layui-input" type="text" name="tags" id="tags" lay-verify="required"
                                   lay-verType="tips" placeholder="请输入标签（多个标签使用逗号分隔）">
                        </div>
                    </div>


                    <!--表单控件项：歌曲风格流派-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">风格:</label>
                        <div class="layui-input-block">
                            <select name="style" id="style">
                                <option value="流行">流行</option>
                                <option value="Rap/Hip Hop">Rap/Hip Hop</option>
                                <option value="pop">pop</option>
                                <option value="摇滚">摇滚</option>
                                <option value="民谣">民谣</option>
                                <option value="电子">电子</option>
                                <option value="轻音乐">轻音乐</option>
                                <option value="爵士">爵士</option>
                                <option value="R&B">R&B</option>
                                <option value="乡村">乡村</option>
                                <option value="中国风">中国风</option>
                                <option value="说唱">说唱</option>
                                <option value="古典">古典</option>
                                <option value="世界音乐">世界音乐</option>
                            </select>
                        </div>
                    </div>

                    <!-- 提交按钮    -->
                    <div class="layui-form-item" style="text-align: right">
                        <button type="button" class="layui-btn layui-btn-warm" lay-submit lay-filter="addMusic">确认添加
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </fieldset>
</div>
<script src="../res/layui/layui.js"></script>
<script>
    layui.use(function () {
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;
        //获取文件上传组件
        var upload = layui.upload;

        //对上传文件按钮绑定按钮击事件
        upload.render({
            elem:'#btnMusic',  //触发上传按钮(使用css选择器)
            url:'/file/upload',
            accept:'audio',   //设置允许上传的文件类型：music
            choose:function (obj){
                //预览文件
                obj.preview(function (index,file){
                    //获取文件名
                    var filename = file.name;
                    //将文件名写入歌曲名输入框
                    $('#musicname').val(filename);
                })
            },
            done:function (resp){
                if(resp.code===0){
                    $('#url').val(resp.data);
                    //将歌曲的播放地址设置给audio空间，用于获取歌曲总时长
                    $('#player').attr('src',resp.data);
                    //为播放器绑定第一帧加载事件
                    $('#player').on('loadeddata',function (){
                        //获取当前播放器所表示歌曲的总播放时长
                        let duration = Math.floor(this.duration)
                        //将总播放时长写入duration隐藏控件中
                        $('#duration').val(duration);
                    })
                }
            }
        })

        // 获取专辑列表并填充下拉框
        $.get('/album/listAll',function (resp){
            if(resp.code===0){
                var albums = resp.data;
                var urlParams = new URLSearchParams(window.location.search);
                var albumId = urlParams.get('aid');
                
                albums.forEach(a=>{
                    var selected = (albumId && albumId == a.id) ? 'selected' : '';
                    $('#aid').append(`<option value="${a.id}" ${selected}>${a.name}</option>`)
                })
                form.render('select');
                
                // 如果有专辑ID参数，自动填充专辑相关信息
                if(albumId) {
                    // 可以在这里添加更多专辑相关的自动填充逻辑
                }
            }
        })

        form.on('submit(addMusic)',function (data){
            let music = data.field;
            //发送请求到服务端
            $.ajax({
                type:'post',
                url:'/music/add',
                data:JSON.stringify(music),
                contentType:'application/json;charset=utf-8',
                success:function(resp){
                    if(resp.code === 0){
                        //提示信息
                        layer.msg(resp.msg,{icon:1,time:1000})

                    }else{
                        //提示信息
                        layer.msg(resp.msg,{icon:2,time:1000})
                    }
                }
            })
            return false;
        })
    })
</script>
</body>
</html>